<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图数据展示</title>
    <link rel="stylesheet" href="../static/assets/css/index.css">
    <!-- <link rel="stylesheet" href="./css/demo.css"> -->
    <link rel="stylesheet" href="../static/assets/font/iconfont.css">
    <!-- <script src="./js/index.js"></script> -->
    <link rel="stylesheet" href="../static/assets/css/110.css">
    <script src="../static/assets/js/echarts.min.js"></script>

</head>
<body>
    <!-- 侧边栏 -->
    <aside class="main-aside">
        <!-- 3D动态盒 -->
        <div class="header3D">
            <div class="cube" id="box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>
        </div>
        <!-- 侧边栏选项 -->
        <div class="asideOption">
            <ul>
                <li>
                    <a href="index.html">
                        <span>首页</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bar.html">
                        <span>柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="pie.html">
                        <span>饼图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="line.html">
                        <span>折线图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="bubble.html">
                        <span>气泡图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
                <li>
                    <a href="polar-bar.html">
                        <span>极坐标下的堆积柱状图</span>
                        <i class="iconfont icon-course"></i>
                    </a>
                </li>
            </ul>



        </div>
        <!-- 旋转图 -->
        <div class="loader">
            <div class="left-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
            <div class="right-box">
                <div class="dots-top">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
                <div class="dots-bottom">
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                    <div class="dot"></div>
                </div>
            </div>
        </div>
    </aside>
    <!-- 头部导航栏 -->
     <div class="headernav">
         <h1>柱状图展示-景区与票价</h1>

        <!-- 时间 -->
        <button id="time" type="text"></button>
    </div>
    <!-- 内容区 -->
    <div class="main-content"style="height: 100%;">
        <!-- 内容展示 -->
        <!-- 西藏-柱状图-->
        <div class="show-content" id="main" style="height: 46%; width: 50%;float: left;top: 0" >
        </div>
        <!-- 张家界-柱状图-->
        <div class="show-content" id="main2" style="height: 46%; width: 50%; float: right; top: 0" >
        </div>
        <!-- 大理-柱状图-->
        <div class="show-content" id="main3" style="height: 46%; width: 50%; float: left" >
        </div>
        <!-- 长沙-柱状图-->
        <div class="show-content" id="main4" style="height: 46%; width: 50%; float: right" >
        </div>
    </div>



    <!-- 时间 -->
    <script src="../static/assets/js/index.js"></script>
    <!-- 柱状图 西藏-->
    <script>
         var chartDom = document.getElementById('main')
         chartDom.innerHTML = `
            {% for data in  xizang %}
            {% if data[1] != none %}
                <p>{{ data[0] }}</p>
                <p>{{ data[1] }}</p>
            {% endif %}
            {% endfor %}
        `

         var oP = document.querySelectorAll('p');

         // 存放 景区
         var arr = []
         // 存放 票价
         var arr2 = []
         // 循环分别存入
         for(var i = 0; i < oP.length/2; i++){
             arr.push(oP[i].innerText);
             arr2.push(oP[i+1].innerText)
             i += 1;
         }
         console.log(arr);
         console.log(arr2);

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));


        // 绘制图表
        myChart.setOption({
            title: {
                text: '西藏',
                subtext: '(去除票价为零的景区）',
                subtextStyle:{
                    color:'rgba(0,0,0,0.89)'
                }
            },
            legend:{
            },
            tooltip: {},
             toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
            xAxis: {
                data: arr
            },
            yAxis: {},
            series: [
                {
                    name: '价格',
                    type: 'bar',
                    data: arr2
                }
            ]
        })
     </script>
    <!-- 柱状图 张家界-->
    <script>
         var chartDom2 = document.getElementById('main2')
         chartDom2.innerHTML = `
            {% for data in  zjj %}
            {% if data[1] != none %}
                <p>{{ data[0] }}</p>
                <p>{{ data[1] }}</p>
            {% endif %}
            {% endfor %}
        `

         var oP = document.querySelectorAll('p');

         // 存放 景区
         var arr = []
         // 存放 票价
         var arr2 = []
         // 循环分别存入
         for(var i = 0; i < oP.length/2; i++){
             arr.push(oP[i].innerText);
             arr2.push(oP[i+1].innerText)
             i += 1;
         }
         console.log(arr);
         console.log(arr2);

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main2'));


        // 绘制图表
        myChart.setOption({
            title: {
                text: '张家界',
                subtext: '(去除票价为零的景区）',
                subtextStyle:{
                    color:'rgba(0,0,0,0.89)'
                }
            },
            legend:{
            },
            tooltip: {},
             toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
            xAxis: {
                data: arr
            },
            yAxis: {},
            series: [
                {
                    name: '价格',
                    type: 'bar',
                    data: arr2
                }
            ]
        })
     </script>
    <!-- 柱状图 大理-->
    <script>
         var chartDom3 = document.getElementById('main3')
         chartDom3.innerHTML = `
            {% for data in  daLi %}
            {% if data[1] != 0 %}
                <p>{{ data[0] }}</p>
                <p>{{ data[1] }}</p>
            {% endif %}
            {% endfor %}
        `

         var oP = document.querySelectorAll('p');

         // 存放 景区
         var arr = []
         // 存放 票价
         var arr2 = []
         // 循环分别存入
         for(var i = 0; i < oP.length/2; i++){
             arr.push(oP[i].innerText);
             arr2.push(oP[i+1].innerText)
             i += 1;
         }
         console.log(arr);
         console.log(arr2);

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main3'));


        // 绘制图表
        myChart.setOption({
            title: {
                text: '大理',
                subtext: '(去除票价为零的景区）',
                subtextStyle:{
                    color:'rgba(0,0,0,0.89)'
                }
            },
            legend:{
            },
            tooltip: {},
            toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
            xAxis: {
                data: arr
            },
            yAxis: {},
            series: [
                {
                    name: '价格',
                    type: 'bar',
                    data: arr2
                }
            ]
        })
     </script>
    <!-- 柱状图 长沙-->
    <script>
         var chartDom4 = document.getElementById('main4')
         chartDom4.innerHTML = `
            {% for data in  cs %}
                {% if data[1] != 0 %}
                <p>{{ data[0] }}</p>
                <p>{{ data[1] }}</p>
                {% endif %}
            {% endfor %}
        `

         var oP = document.querySelectorAll('p');

         // 存放 景区
         var arr = []
         // 存放 票价
         var arr2 = []
         // 循环分别存入
         for(var i = 0; i < oP.length/2; i++){
             arr.push(oP[i].innerText);
             arr2.push(oP[i+1].innerText)
             i += 1;
         }
         console.log(arr);
         console.log(arr2);

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main4'));


        // 绘制图表
        myChart.setOption({
            title: {
                text: '长沙',
                subtext: '(去除票价为零的景区）',
                subtextStyle:{
                    color:'rgba(0,0,0,0.89)'
                }
            },
            legend:{
            },
            tooltip: {},
             toolbox: {
            show: true,
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              dataView: { readOnly: false },
              magicType: { type: ['line', 'bar'] },
              restore: {},
              saveAsImage: {}
            }
          },
            xAxis: {
                data: arr
            },
            yAxis: {},
            series: [
                {
                    name: '价格',
                    type: 'bar',
                    data: arr2
                }
            ]
        })
     </script>
</body>
</html>